<!--战绩详情单人战绩组件-->
<script setup lang="js">

import LcuProfile from "@share/components/lcu/LcuProfile.vue";
import LcuSummonerName from "@share/components/lcu/LcuSummonerName.vue";
import KDA from "@share/components/lcu/KDA.vue";
import {computed, defineEmits, defineProps, onBeforeMount, ref} from 'vue'
import LcuItem from "@share/components/lcu/LcuItem.vue";
import LcuChampionProfile from "@share/components/lcu/LcuChampionProfile.vue";
import LcuSpellProfile from "@share/components/lcu/LcuSpellProfile.vue";
import LcuTierIcon from "@share/components/lcu/LcuTierIcon.vue";
import {tierMap} from "@/renderer/share/utils/constants.js";
import LcuPerk from "@share/components/lcu/LcuPerk.vue";

const {direction, participantInfo, maxInfo} = defineProps({
  "direction": {
    default: "left"
  },
  //参与者信息
  "participantInfo": {},
  "maxInfo": {}
})

const directionMap = {
  "left": "row",
  "right": "row-reverse",
}


const emit = defineEmits([
    'jumpSummonerHomePage',//跳转到其他玩家的主页
])

//伤害和最高伤害的人的百分比
const damagePercent = computed(() => {
 const  n = ((participantInfo?.data?.totalDamageDealtToChampions / maxInfo?.maxDamage) * 100)
 if(Number.isNaN(n)) {
   return 0;
 }else{
   return  parseInt(n) ;
 }
})
//当前承受伤害和最大承受伤害人的占比
const damageTokenPercent = computed(() => {
  const n =((participantInfo?.data?.totalDamageTaken / maxInfo?.maxDamageTaken) * 100)
  if(Number.isNaN(n)) {
    return 0 ;
  }else{
    return  parseInt(n) ;
  }
})


const gameRecordSummonerRankInfo = ref({});

const showTierIcon = computed(() => {
  const tier =  (gameRecordSummonerRankInfo.value?.queueMap||{})['RANKED_SOLO_5x5']?.tier;
  return tierMap[tier||'None']?.icon;
})

const showTierText = computed(() => {
  const rank =  (gameRecordSummonerRankInfo.value?.queueMap||{})['RANKED_SOLO_5x5'];
  return {
    "tierText":tierMap[rank?.tier||'None']?.value,
    "division":rank?.division==='NA'?'':rank?.division
  }
})


onBeforeMount(()=>{
  window.api.rank.getRankedListByPuuid(participantInfo?.player?.puuid)
      .then(res=>{
        gameRecordSummonerRankInfo.value = res.data;
      })
})


</script>

<template>

    <div style="display: flex;align-items: center;justify-content: space-between"
         :style="{
      'flex-direction':`${directionMap[direction]}`,
      'height':'60px',
      'padding':'0 12px',
      'margin':'6px 0'
    }">
<!--      数据分析区域-->
      <div class="data-num-show-wrapper">
        <div>
          <el-progress
              :stroke-width="12"
              :percentage="damagePercent"
              status="exception"
              :show-text="true"
              :text-inside="true"
          >
            <el-text>{{ `${((participantInfo?.data?.totalDamageDealtToChampions) / 1000).toFixed(1)}K` }}
            </el-text>
          </el-progress>
        </div>
        <div>
          <el-progress
              :stroke-width="12"
              :percentage="damageTokenPercent"
              status="success"
              :show-text="true"
              :text-inside="true"
          >
            <el-text >{{ `${((participantInfo?.data?.totalDamageTaken) / 1000).toFixed(1)}K` }}
            </el-text>
          </el-progress>
        </div>
        <div style="height: 12px;display: flex">
          <el-icon style="height: 12px;width: 12px"><View /></el-icon>
          <el-text style="font-size: 12px;line-height: 15px;margin-left: 3px">{{participantInfo?.data?.visionScore}} {{participantInfo?.data?.wardsKilled}}/{{participantInfo?.data?.visionWardsBoughtInGame}}</el-text>
        </div>
      </div>
      <div>
        <KDA
            size="small"
            :k="participantInfo?.data?.kda?.k"
            :d="participantInfo?.data?.kda?.d"
            :a="participantInfo?.data?.kda?.a"
        />
      </div>

      <div style="display: flex;align-items: center"
      :style="{
         'flex-direction':`${directionMap[direction]}`
      }"
      >
        <LcuChampionProfile shape="circle"
                            :size="48"
                            :champ-level="participantInfo?.data?.champLevel"
                            :champion-id="participantInfo?.champion?.championId"/>
        <!--                召唤师技能-->
        <div style="display: flex;flex-direction: column">
          <LcuSpellProfile :spell-id="participantInfo?.champion?.spell?.d"/>
          <LcuSpellProfile :spell-id="participantInfo?.champion?.spell?.f"/>
        </div>
        <!--                天赋-->
        <div style="display: flex;flex-direction: column;margin: 6px">
          <LcuPerk :perk-info="participantInfo?.champion?.perkStyle"/>
        </div>
      </div>


      <div style="display:flex;flex-direction: column;width: 200px;align-items: center;justify-content: center">
        <LcuSummonerName :copy-name-to-clip-board="false" @click="()=>{emit('jumpSummonerHomePage',{'puuid':participantInfo?.player?.puuid})}" :name="participantInfo?.player?.gameName" :num="participantInfo?.player?.tagLine"/>
        <div class="item-image-wrapper">
          <LcuItem :itemId="participantInfo?.champion?.items?.item0" style="margin-left: 2px"></LcuItem>
          <LcuItem :itemId="participantInfo?.champion?.items?.item1" style="margin-left: 2px"></LcuItem>
          <LcuItem :itemId="participantInfo?.champion?.items?.item2" style="margin-left: 2px"></LcuItem>
          <LcuItem :itemId="participantInfo.champion?.items?.item3" style="margin-left: 2px"></LcuItem>
          <LcuItem :itemId="participantInfo?.champion?.items?.item4" style="margin-left: 2px"></LcuItem>
          <LcuItem :itemId="participantInfo?.champion?.items?.item5" style="margin-left: 2px"></LcuItem>
          <LcuItem :itemId="participantInfo?.champion?.items?.item6" style="margin-left: 2px"></LcuItem>
        </div>
      </div>

<!--      玩家基础信息/段位等-->
      <div style="width: 90px;display: flex;align-items: center"
      :style="{
         'flex-direction':`${directionMap[direction]}`
      }"
      >
        <LcuProfile  :profileId="participantInfo?.player?.profileIcon"/>
        <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;width: 94px">
          <LcuTierIcon :tierLevel="showTierIcon"/>
          <el-text size="small" style="display: inline-block">{{showTierText.tierText}}{{showTierText.division}}</el-text>
        </div>
      </div>
    </div>

<!--    <el-divider style="margin: 0"/>-->
</template>

<style scoped>
:deep(.el-progress-bar__inner) {
  display: flex;
  justify-content: flex-start !important;
  align-items: center !important;
}

.data-num-show-wrapper {
  display: flex;
  flex-direction: column;
  width: 80px;
  margin-left:6px;
  &>div{
    margin:2px 0
  }

}

</style>